<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>1.ref属性</title>
    <script src="../../js/vue.js"></script>
    <style>
        .bbb {
            background-color: rgb(125,125,125);
        }
    </style>
</head>
<body>
<!--
1.Vue特殊特性
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取

2.ref使用
2.1在需要获取的元素上添加ref属性. 例如: <p ref="mypp">我是段落</>
2.2在使用的地方通过 this.$refs.xxx获取, 例如 this.$ref.myppp

3.ref特点
ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <a href="" ref="mpp">这是一个啊标签</a>
    <one ref="myone"></one>
</div>
<template id="one">
    <div>
        <p class="bbb">我是P</p>
        <p>{{msg}}</p>
    </div>
</template>
</body>

<script type="text/javascript">

    new Vue({
        el:'#app',
        data: {
            msg:'是客户的进口附加税开朗大方'
        },
        components: {
            one: {
                template:'#one',
                data: function () {
                    return {
                        msg:'sdfsdf'
                    }
                }
            }
        },
        methods: {
            getInfo() {

                // 注意点: 如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素
                // 注意点: 并且VUE官方并不推荐我们这样获取
                // console.log(document.querySelector("p"));
                // console.log(document.querySelector("#myOne"));


                console.log(document.querySelector("p"))
                console.log(document.querySelector("a"))

                // 在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取
                // 注意点: ref如果是添加给元素的元素, 那么拿到的就是元素的元素
                //         ref如果是添加给自定义的组件, 那么拿到的就是自定义的组件
                console.log(this.$refs.myp)
                console.log(this.$refs.myone.msg)
            }
        },
        mounted() {
            this.getInfo();
        }
    })
</script>

</html>